<template>
    <view>
        <view class="feed-wrap" :class="{ 'feed-sliding-fixed': isFixed }" :style="[topStyle]">
            <view :style="[feedStyle]">
                <scroll-view
                    class="feed-scroll-view"
                    scroll-x="true"
                    :scroll-left="scrollLeft"
                    scroll-with-animation="true"
                    @scroll="onScroll"
                >
                    <view class="feed-sliding-nav">
                        <view class="feed-sliding-nav-item">
                            <view
                                class="text u-line-1"
                                :class="[current == -1 ? 'magnify' : '']"
                                @click="clickitem(-1)"
                                >推荐</view
                            >
                            <!-- 下划线标签样式控制 -->
                            <u-image
                                width="40rpx"
                                height="14rpx"
                                class="underline"
                                v-show="current == -1"
                                src="@/pageFound/static/images/store_title_icon.png"
                            ></u-image>
                        </view>
                        <view
                            class="feed-sliding-nav-item"
                            v-for="(item, index) in categoryList"
                            :key="index"
                            @click="clickitem(index, item)"
                        >
                            <view
                                class="text u-line-1"
                                :class="[index === current ? 'magnify' : '']"
                                >{{ item.title }}</view
                            >
                            <!-- 下划线标签样式控制 -->
                            <u-image
                                width="40rpx"
                                height="14rpx"
                                class="underline"
                                v-show="index == current"
                                src="@/pageFound/static/images/store_title_icon.png"
                            ></u-image>
                        </view>
                    </view>
                </scroll-view>
            </view>
            <div class="feed-category-inner">
                <scroll-view
                    class="feed-scroll-view"
                    scroll-x="true"
                    :scroll-left="0"
                    scroll-with-animation="true"
                >
                    <div class="feed-category-nav">
                        <div
                            class="feed-category-nav-item u-line-1"
                            :class="{
                                active: currentId == item.id,
                            }"
                            v-for="(item, index) in menuList"
                            :key="index"
                            @click="change(item)"
                        >
                            {{ item.title }}
                        </div>
                    </div>
                </scroll-view>
            </div>
        </view>
        <!-- 解决fixed定位后导航栏塌陷的问题 -->
        <view class="feed-sliding-nav-placeholder" v-if="isFixed"></view>
        <view class="feed-sliding-inner-placeholder" v-if="isFixed && menuList.length > 0"></view>
    </view>
</template>

<script>
import { mapGetters } from 'vuex'
export default {
    props: {
        // 对象形式，因为用户可能定义一个纯色，或者线性渐变的颜色
        background: {
            type: Object,
            default() {
                return {
                    background: '#ffffff',
                }
            },
        },
        //是否固定在顶部
        isFixed: {
            type: Boolean,
            default: true,
        },
    },
    data() {
        return {
            categoryList: [],
            menuList: [],
            feedWidthItem: [],
            //当前活动的item
            current: -1,
            currentId: 0,
            scrollLeft: 0,
            old: {
                scrollLeft: 0,
            },
        }
    },
    computed: {
        ...mapGetters({
            globWindowWidth: 'projectSetting/globWindowWidth',
            navbarHeight: 'projectSetting/globNavbarHeight',
            statusBarHeight: 'projectSetting/globStatusBarHeight',
        }),
        feedStyle() {
            let style = {}
            Object.assign(style, this.background)
            return style
        },
        topStyle() {
            let style = {}
            style.top = this.navbarHeight + this.statusBarHeight - 1 + 'px'
            return style
        },
    },
    mounted() {
        this.getCategoryInfo()
    },
    methods: {
        // 获取分类数据
        getCategoryInfo() {
            this.$edu.api
                .getCategory({
                    type: 6,
                })
                .then((res) => {
                    const { data } = res
                    this.categoryList = data
                    setTimeout(() => {
                        this.getElRectAll()
                    }, 200)
                })
        },
        // 点一级
        clickitem(index, item) {
            if (index == this.current) return
            this.current = index
            // 推荐
            if (index == -1) {
                this.$emit('change', -1)
                this.menuList = []
                this.currentId = 0
                return
            }
            this.menuList = item.child || []
            let list = this.menuList.some((v) => v.id == item.id)
            if (!this.$u.test.empty(this.menuList) && !list) {
                let data = {
                    id: item.id,
                    pid: item.id,
                    title: '全部',
                }
                this.menuList.unshift(data)
            }
            this.currentId = item.id
            if (index > 0) {
                this.getScrollLeft(index)
                this.menuList = item.child || []
            }
            this.$emit('change', this.currentId)
        },
        getScrollLeft(index) {
            this.scrollLeft = this.old.scrollLeft
            this.$nextTick(() => {
                this.scrollLeft =
                    this.feedWidthItem[index].left -
                    this.globWindowWidth / 2 +
                    this.feedWidthItem[index].width / 2 +
                    42
            })
        },
        onScroll(e) {
            this.old.scrollLeft = e.detail.scrollLeft
        },
        change(item) {
            this.currentId = item.id
            this.$emit('change', item.id)
        },
        // 获取一个item目标元素的宽度
        getElRectAll() {
            const query = uni.createSelectorQuery().in(this)
            query
                .selectAll('.feed-sliding-nav-item')
                .boundingClientRect((res) => {
                    // 如果节点尚未生成，res值为null，循环调用执行
                    if (!res) {
                        setTimeout(() => {
                            this.getElRectAll()
                        }, 10)
                        return
                    }
                    this.feedWidthItem = res
                })
                .exec()
        },
    },
}
</script>

<style lang="scss">
.feed-sliding-fixed {
    position: fixed;
    left: 0;
    right: 0;
    z-index: 991;
}
.feed-scroll-view {
    white-space: nowrap;
}
.feed-sliding-nav {
    display: flex;
    height: 45px;
    .feed-sliding-nav-item {
        padding: 0 16rpx;
        height: 45px;
        position: relative;
        display: flex;
        align-items: center;
        .text {
            font-size: 13px;
            color: #ffffff;
            max-width: 120px;
        }
        .magnify {
            font-size: 15px;
            font-weight: 600;
        }
        .underline {
            position: absolute;
            left: 50%;
            bottom: 10px;
            z-index: 10;
            transform: translateX(-50%);
        }
    }
}
.feed-sliding-nav-placeholder {
    width: 100%;
    height: 45px;
}
.feed-sliding-inner-placeholder {
    width: 100%;
    height: 40px;
}
.feed-category-inner {
    padding: 8px 30rpx;
    background: #f7f7f7;
    .feed-category-nav {
        .feed-category-nav-item {
            padding: 0 16rpx;
            font-size: 26rpx;
            font-weight: 400;
            color: $edu-main-color;
            line-height: 24px;
            height: 24px;
            max-width: 120px;
            background: #ededed;
            border-radius: 12px;
            display: inline-block;
            vertical-align: top;
            &.active {
                color: #ffffff;
                background: linear-gradient(90deg, #ff3b2f 0%, #ff8a52 100%);
            }
        }
        .feed-category-nav-item + .feed-category-nav-item {
            margin-left: 24rpx;
        }
    }
}
</style>
